import React, { Component } from 'react'

import "../assets/styles/content.css";
import TabA from './TabA';
import TabB from './TabB';
import TabC from './TabC';
import TabD from './TabD';
import TabE from './TabE';

export default class Content extends Component {
  state = {
    currentTab: "tabA"
  }
  get computedTab() {
    const { currentTab } = this.state
    switch (currentTab) {
      case "tabA": return <TabA></TabA>;
      case "tabB": return <TabB></TabB>;
      case "tabC": return <TabC></TabC>;
      case "tabD": return <TabD></TabD>;
      case "tabE": return <TabE></TabE>;
    }
  }
  changeLi = (event) => {

    const element = event.target;
    console.log(element.nodeName);
    if (element.nodeName === "LI") {
      const value = event.target.getAttribute("tab");
      this.setState({
        currentTab: value
      })
    }

  }
  render() {
    const { currentTab } = this.state
    return (
      <div className='content'>
        {/*  导航 */}
        <div className='menu'>
          <ul onClick={this.changeLi}>
            <li className={currentTab == 'tabA' ? "active" : ""} tab="tabA">优惠券列表</li>
            <li className={currentTab == 'tabB' ? "active" : ""} tab="tabB">领取记录</li>
            <li className={currentTab == 'tabC' ? "active" : ""} tab="tabC">优惠券扩展</li>
            <li className={currentTab == 'tabD' ? "active" : ""} tab="tabD">低代码</li>
            <li className={currentTab == 'tabE' ? "active" : ""} tab="tabE">车牌选号</li>
          </ul>
        </div>
        {/* 数据渲染模块 */}
        <div className='dataSource'>
          {/* <TabA></TabA> */}
          {this.computedTab}
        </div>
      </div>
    )
  }
}
